<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>药物作用与相克查询</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        danger: '#F53F3F',
                        warning: '#FF7D00',
                        success: '#00B42A',
                        neutral: {
                            100: '#F2F3F5',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 20px rgba(0, 0, 0, 0.08)',
                        'card-hover': '0 8px 30px rgba(0, 0, 0, 0.12)',
                    }
                },
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-balance {
                text-wrap: balance;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .animate-fade-in {
                animation: fadeIn 0.3s ease-in-out;
            }
            .animate-slide-up {
                animation: slideUp 0.4s ease-out;
            }
            .animate-pulse-slow {
                animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideUp {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
    </style>
</head>

<body class="font-inter bg-neutral-100 text-neutral-700 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <!-- 品牌标志 -->
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fa fa-medkit text-primary text-2xl mr-2"></i>
                        <span class="text-xl font-semibold text-neutral-700">药知通</span>
                    </div>
                </div>
                
                <!-- 桌面端导航链接 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="#home" class="text-primary font-medium flex items-center hover:text-primary/80 transition-colors">
                        <i class="fa fa-home mr-1"></i> 首页
                    </a>
                    <a href="#search" class="text-neutral-500 font-medium flex items-center hover:text-primary transition-colors">
                        <i class="fa fa-search mr-1"></i> 药品查询
                    </a>
                    <a href="#interaction" class="text-neutral-500 font-medium flex items-center hover:text-primary transition-colors">
                        <i class="fa fa-exchange mr-1"></i> 相互作用
                    </a>
                    <a href="#my-medicines" class="text-neutral-500 font-medium flex items-center hover:text-primary transition-colors">
                        <i class="fa fa-list-alt mr-1"></i> 我的药品
                    </a>
                </nav>
                
                <!-- 用户操作区 -->
                <div class="flex items-center space-x-4">
                    <button class="hidden md:block px-4 py-2 rounded-full bg-primary text-white hover:bg-primary/90 transition-colors shadow-sm">
                        <i class="fa fa-user-circle mr-1"></i> 登录
                    </button>
                    
                    <!-- 移动端菜单按钮 -->
                    <button type="button" class="md:hidden text-neutral-500 hover:text-primary" id="mobile-menu-button">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div class="md:hidden hidden bg-white border-t" id="mobile-menu">
            <div class="container mx-auto px-4 py-3 space-y-2">
                <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-primary">
                    <i class="fa fa-home mr-2"></i>首页
                </a>
                <a href="#search" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-500 hover:text-primary hover:bg-neutral-100 transition-colors">
                    <i class="fa fa-search mr-2"></i>药品查询
                </a>
                <a href="#interaction" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-500 hover:text-primary hover:bg-neutral-100 transition-colors">
                    <i class="fa fa-exchange mr-2"></i>相互作用
                </a>
                <a href="#my-medicines" class="block px-3 py-2 rounded-md text-base font-medium text-neutral-500 hover:text-primary hover:bg-neutral-100 transition-colors">
                    <i class="fa fa-list-alt mr-2"></i>我的药品
                </a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-primary text-center mt-2">
                    <i class="fa fa-user-circle mr-1"></i> 登录/注册
                </a>
            </div>
        </div>
    </header>

    <main class="flex-grow">
        <!-- 英雄区域 -->
        <section id="home" class="bg-gradient-to-r from-primary/90 to-primary py-16 md:py-24 text-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="max-w-3xl mx-auto text-center animate-fade-in">
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight mb-4">
                        安全用药，<br class="md:hidden">从了解开始
                    </h1>
                    <p class="text-[clamp(1rem,2vw,1.25rem)] text-white/90 mb-8 max-w-2xl mx-auto text-balance">
                        查询药物信息、了解药物相互作用和相克情况，保障您和家人的用药安全
                    </p>
                    <div class="relative max-w-xl mx-auto">
                        <input 
                            type="text" 
                            placeholder="搜索药品名称、成分或症状..." 
                            class="w-full px-5 py-4 rounded-full text-neutral-700 focus:outline-none focus:ring-2 focus:ring-secondary shadow-lg"
                        >
                        <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-full transition-colors shadow-md">
                            <i class="fa fa-search mr-1"></i> 搜索
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 功能特点 -->
        <section class="py-16 bg-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16 animate-slide-up">
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-700 mb-4">专业的药品信息查询工具</h2>
                    <p class="text-neutral-500 max-w-2xl mx-auto text-balance">
                        提供全面、准确的药品信息，帮助您安全合理用药
                    </p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <!-- 功能卡片 1 -->
                    <div class="bg-white rounded-xl p-6 shadow-card hover:shadow-card-hover transition-all duration-300 transform hover:-translate-y-1 border border-neutral-200">
                        <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-6">
                            <i class="fa fa-search text-primary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3 text-neutral-700">药品信息查询</h3>
                        <p class="text-neutral-500">
                            快速查询药品说明书、适应症、用法用量、不良反应等详细信息，全面了解您所使用的药物。
                        </p>
                    </div>
                    
                    <!-- 功能卡片 2 -->
                    <div class="bg-white rounded-xl p-6 shadow-card hover:shadow-card-hover transition-all duration-300 transform hover:-translate-y-1 border border-neutral-200">
                        <div class="w-14 h-14 rounded-full bg-warning/10 flex items-center justify-center mb-6">
                            <i class="fa fa-exclamation-triangle text-warning text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3 text-neutral-700">药物相克检查</h3>
                        <p class="text-neutral-500">
                            检查多种药物之间是否存在相克或不良相互作用，避免因同时服用多种药物而产生健康风险。
                        </p>
                    </div>
                    
                    <!-- 功能卡片 3 -->
                    <div class="bg-white rounded-xl p-6 shadow-card hover:shadow-card-hover transition-all duration-300 transform hover:-translate-y-1 border border-neutral-200">
                        <div class="w-14 h-14 rounded-full bg-success/10 flex items-center justify-center mb-6">
                            <i class="fa fa-calendar-check-o text-success text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3 text-neutral-700">用药记录管理</h3>
                        <p class="text-neutral-500">
                            记录个人用药历史，设置用药提醒，帮助您养成按时按量服药的良好习惯，提高治疗效果。
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 药品查询区域 -->
        <section id="search" class="py-16 bg-neutral-100">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="max-w-4xl mx-auto">
                    <div class="text-center mb-10">
                        <h2 class="text-[clamp(1.5rem,3vw,2.25rem)] font-bold text-neutral-700 mb-4">药品信息查询</h2>
                        <p class="text-neutral-500 max-w-2xl mx-auto">
                            输入药品名称，获取详细的药品说明书信息，包括适应症、用法用量、副作用等
                        </p>
                    </div>
                    
                    <!-- 搜索框 -->
                    <div class="bg-white rounded-xl shadow-card p-6 mb-8">
                        <div class="flex flex-col md:flex-row gap-4">
                            <input 
                                type="text" 
                                placeholder="请输入药品名称..." 
                                class="flex-grow px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
                                id="drug-search-input"
                            >
                            <button class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-sm whitespace-nowrap" id="search-drug-btn">
                                <i class="fa fa-search mr-2"></i>查询药品
                            </button>
                        </div>
                        
                        <!-- 热门搜索 -->
                        <div class="mt-4">
                            <p class="text-sm text-neutral-500 mb-2">热门搜索：</p>
                            <div class="flex flex-wrap gap-2">
                                <a href="#" class="text-sm text-primary hover:text-primary/80 bg-primary/10 px-3 py-1 rounded-full transition-colors">阿司匹林</a>
                                <a href="#" class="text-sm text-primary hover:text-primary/80 bg-primary/10 px-3 py-1 rounded-full transition-colors">布洛芬</a>
                                <a href="#" class="text-sm text-primary hover:text-primary/80 bg-primary/10 px-3 py-1 rounded-full transition-colors">阿莫西林</a>
                                <a href="#" class="text-sm text-primary hover:text-primary/80 bg-primary/10 px-3 py-1 rounded-full transition-colors">头孢克肟</a>
                                <a href="#" class="text-sm text-primary hover:text-primary/80 bg-primary/10 px-3 py-1 rounded-full transition-colors">盐酸二甲双胍</a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 药品查询结果 -->
                    <div id="drug-result" class="hidden bg-white rounded-xl shadow-card overflow-hidden animate-fade-in">
                        <!-- 药品基本信息 -->
                        <div class="p-6 border-b border-neutral-200">
                            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                                <div>
                                    <h3 class="text-2xl font-bold text-neutral-700">阿司匹林肠溶片</h3>
                                    <p class="text-neutral-500 mt-1">Aspirin Enteric-coated Tablets</p>
                                </div>
                                <div class="flex gap-2">
                                    <button class="px-4 py-2 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-colors flex items-center">
                                        <i class="fa fa-heart-o mr-1"></i> 收藏
                                    </button>
                                    <button class="px-4 py-2 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-colors flex items-center">
                                        <i class="fa fa-share-alt mr-1"></i> 分享
                                    </button>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
                                <div class="bg-neutral-100 p-3 rounded-lg">
                                    <p class="text-sm text-neutral-500">批准文号</p>
                                    <p class="text-neutral-700 font-medium">国药准字H12345678</p>
                                </div>
                                <div class="bg-neutral-100 p-3 rounded-lg">
                                    <p class="text-sm text-neutral-500">生产厂家</p>
                                    <p class="text-neutral-700 font-medium">XX制药有限公司</p>
                                </div>
                                <div class="bg-neutral-100 p-3 rounded-lg">
                                    <p class="text-sm text-neutral-500">规格</p>
                                    <p class="text-neutral-700 font-medium">100mg*30片</p>
                                </div>
                                <div class="bg-neutral-100 p-3 rounded-lg">
                                    <p class="text-sm text-neutral-500">适应症</p>
                                    <p class="text-neutral-700 font-medium">解热、镇痛、抗炎</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 药品详情标签页 -->
                        <div class="border-b border-neutral-200">
                            <div class="flex overflow-x-auto scrollbar-hide">
                                <button class="px-6 py-4 text-primary font-medium border-b-2 border-primary whitespace-nowrap">
                                    药品说明
                                </button>
                                <button class="px-6 py-4 text-neutral-500 hover:text-neutral-700 whitespace-nowrap transition-colors">
                                    用法用量
                                </button>
                                <button class="px-6 py-4 text-neutral-500 hover:text-neutral-700 whitespace-nowrap transition-colors">
                                    不良反应
                                </button>
                                <button class="px-6 py-4 text-neutral-500 hover:text-neutral-700 whitespace-nowrap transition-colors">
                                    禁忌与慎用
                                </button>
                                <button class="px-6 py-4 text-neutral-500 hover:text-neutral-700 whitespace-nowrap transition-colors">
                                    相互作用
                                </button>
                            </div>
                        </div>
                        
                        <!-- 药品说明内容 -->
                        <div class="p-6">
                            <div class="mb-6">
                                <h4 class="text-lg font-semibold mb-3 text-neutral-700">药理作用</h4>
                                <p class="text-neutral-600 leading-relaxed">
                                    本品为非甾体抗炎药。通过抑制环氧化酶，减少前列腺素合成，产生解热、镇痛作用；通过抑制血小板的环氧化酶，减少前列腺素的生成而具有抑制血小板聚集的作用。
                                </p>
                            </div>
                            
                            <div class="mb-6">
                                <h4 class="text-lg font-semibold mb-3 text-neutral-700">适应症</h4>
                                <ul class="list-disc pl-5 text-neutral-600 space-y-1 leading-relaxed">
                                    <li>用于感冒或流感引起的发热、头痛；</li>
                                    <li>缓解轻、中度疼痛如关节痛、神经痛、牙痛、月经痛、肌肉痛；</li>
                                    <li>抑制血小板聚集，用于预防和治疗缺血性心脏病、心绞痛、心肌梗死、脑血栓形成。</li>
                                </ul>
                            </div>
                            
                            <div>
                                <h4 class="text-lg font-semibold mb-3 text-neutral-700">注意事项</h4>
                                <div class="bg-warning/10 border-l-4 border-warning p-4 rounded-r">
                                    <p class="text-neutral-600 font-medium mb-2">
                                        <i class="fa fa-exclamation-circle text-warning mr-1"></i> 特别提醒
                                    </p>
                                    <p class="text-neutral-600 leading-relaxed">
                                        本品为对症治疗药，用于解热连续使用不超过3天，用于止痛不超过5天，症状未缓解请咨询医师或药师。
                                    </p>
                                </div>
                                <ul class="list-disc pl-5 text-neutral-600 mt-4 space-y-1 leading-relaxed">
                                    <li>孕妇怀孕早期及怀孕中期、哺乳期妇女慎用，妊娠最后三个月的妇女应禁用本品；</li>
                                    <li>饮酒或与其他非甾体抗炎药同用时增加胃肠道副作用，并有致溃疡的危险；</li>
                                    <li>有哮喘及其他过敏反应者慎用。</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 药物相互作用检查 -->
        <section id="interaction" class="py-16 bg-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="max-w-4xl mx-auto">
                    <div class="text-center mb-10">
                        <h2 class="text-[clamp(1.5rem,3vw,2.25rem)] font-bold text-neutral-700 mb-4">药物相互作用检查</h2>
                        <p class="text-neutral-500 max-w-2xl mx-auto">
                            输入多种药物名称，检查它们之间是否存在不良相互作用或相克情况
                        </p>
                    </div>
                    
                    <!-- 相互作用检查工具 -->
                    <div class="bg-white rounded-xl shadow-card p-6 mb-8 border border-neutral-200">
                        <div class="mb-6">
                            <label class="block text-neutral-700 font-medium mb-2">添加药物</label>
                            <div class="flex gap-3">
                                <input 
                                    type="text" 
                                    placeholder="输入药物名称..." 
                                    class="flex-grow px-4 py-3 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
                                    id="interaction-drug-input"
                                >
                                <button class="px-5 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-sm whitespace-nowrap" id="add-drug-btn">
                                    <i class="fa fa-plus mr-1"></i>添加
                                </button>
                            </div>
                        </div>
                        
                        <!-- 已添加的药物 -->
                        <div class="mb-6">
                            <label class="block text-neutral-700 font-medium mb-2">已添加药物</label>
                            <div id="selected-drugs" class="flex flex-wrap gap-2 min-h-[50px] p-3 border border-neutral-300 rounded-lg">
                                <!-- 动态添加的药物标签 -->
                                <div class="flex items-center bg-primary/10 text-primary px-3 py-1 rounded-full">
                                    阿司匹林
                                    <button class="ml-2 text-primary/70 hover:text-primary">
                                        <i class="fa fa-times"></i>
                                    </button>
                                </div>
                                <div class="flex items-center bg-primary/10 text-primary px-3 py-1 rounded-full">
                                    布洛芬
                                    <button class="ml-2 text-primary/70 hover:text-primary">
                                        <i class="fa fa-times"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <button class="w-full py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-sm" id="check-interaction-btn">
                            <i class="fa fa-exchange mr-2"></i>检查药物相互作用
                        </button>
                    </div>
                    
                    <!-- 相互作用检查结果 -->
                    <div id="interaction-result" class="hidden bg-white rounded-xl shadow-card overflow-hidden animate-fade-in">
                        <div class="p-6 border-b border-neutral-200">
                            <h3 class="text-xl font-bold text-neutral-700 mb-2">药物相互作用检查结果</h3>
                            <p class="text-neutral-500">
                                检查药物：阿司匹林、布洛芬
                            </p>
                        </div>
                        
                        <div class="p-6">
                            <div class="bg-danger/10 border-l-4 border-danger p-5 rounded-r mb-6">
                                <div class="flex items-start">
                                    <div class="flex-shrink-0">
                                        <i class="fa fa-warning text-danger text-xl"></i>
                                    </div>
                                    <div class="ml-4">
                                        <h4 class="text-lg font-semibold text-danger mb-2">严重相互作用</h4>
                                        <p class="text-neutral-600 leading-relaxed">
                                            阿司匹林与布洛芬同时使用可能增加胃肠道不良反应（如溃疡、出血）的风险，并可能降低阿司匹林的抗血小板作用。
                                        </p>
                                        <p class="text-neutral-600 mt-3 font-medium">
                                            建议：避免同时使用。如需合用，应在医生指导下进行，并密切监测胃肠道反应。
                                        </p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-neutral-100 p-5 rounded-lg">
                                <h4 class="text-lg font-semibold mb-3 text-neutral-700">安全用药建议</h4>
                                <ul class="list-disc pl-5 text-neutral-600 space-y-2 leading-relaxed">
                                    <li>两种药物均为非甾体抗炎药，作用机制相似，合用不会增加疗效，但会增加不良反应风险；</li>
                                    <li>如确需同时使用，应间隔至少2小时服用；</li>
                                    <li>长期合用需定期检查血常规和肝肾功能；</li>
                                    <li>有胃溃疡、肝肾功能不全病史者应避免合用。</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 我的药品 -->
        <section id="my-medicines" class="py-16 bg-neutral-100">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="max-w-4xl mx-auto">
                    <div class="text-center mb-10">
                        <h2 class="text-[clamp(1.5rem,3vw,2.25rem)] font-bold text-neutral-700 mb-4">我的药品</h2>
                        <p class="text-neutral-500 max-w-2xl mx-auto">
                            管理您正在服用的药品，设置用药提醒，随时检查药物相互作用
                        </p>
                    </div>
                    
                    <!-- 未登录提示 -->
                    <div id="login-prompt" class="bg-white rounded-xl shadow-card p-8 text-center">
                        <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fa fa-user-circle text-primary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-2 text-neutral-700">请登录后使用此功能</h3>
                        <p class="text-neutral-500 mb-6">
                            登录后可以保存您的用药记录，设置用药提醒，方便随时查看
                        </p>
                        <button class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-sm">
                            <i class="fa fa-sign-in mr-1"></i> 立即登录
                        </button>
                    </div>
                    
                    <!-- 已登录状态（默认隐藏） -->
                    <div id="medicine-list" class="hidden">
                        <!-- 功能按钮 -->
                        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
                            <h3 class="text-lg font-semibold text-neutral-700">我的用药清单</h3>
                            <div class="flex gap-3">
                                <button class="px-4 py-2 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-colors flex items-center">
                                    <i class="fa fa-plus mr-1"></i> 添加药品
                                </button>
                                <button class="px-4 py-2 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-colors flex items-center">
                                    <i class="fa fa-exchange mr-1"></i> 检查相互作用
                                </button>
                            </div>
                        </div>
                        
                        <!-- 药品列表 -->
                        <div class="space-y-4">
                            <!-- 药品项 1 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 border border-neutral-200 flex flex-col sm:flex-row sm:items-center justify-between">
                                <div class="flex items-start gap-4">
                                    <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                        <i class="fa fa-pills text-primary"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-semibold text-neutral-700">阿司匹林肠溶片</h4>
                                        <p class="text-sm text-neutral-500 mt-0.5">100mg，每日1次，饭后服用</p>
                                        <div class="flex items-center mt-2">
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success">
                                                <i class="fa fa-calendar-check-o mr-1"></i> 正在服用
                                            </span>
                                            <span class="ml-2 text-xs text-neutral-500">剩余：15天</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex gap-2 mt-4 sm:mt-0">
                                    <button class="p-2 text-neutral-500 hover:text-primary transition-colors">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <button class="p-2 text-neutral-500 hover:text-danger transition-colors">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <!-- 药品项 2 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 border border-neutral-200 flex flex-col sm:flex-row sm:items-center justify-between">
                                <div class="flex items-start gap-4">
                                    <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                        <i class="fa fa-pills text-primary"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-semibold text-neutral-700">盐酸二甲双胍片</h4>
                                        <p class="text-sm text-neutral-500 mt-0.5">500mg，每日3次，饭前服用</p>
                                        <div class="flex items-center mt-2">
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success">
                                                <i class="fa fa-calendar-check-o mr-1"></i> 正在服用
                                            </span>
                                            <span class="ml-2 text-xs text-neutral-500">剩余：7天</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex gap-2 mt-4 sm:mt-0">
                                    <button class="p-2 text-neutral-500 hover:text-primary transition-colors">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <button class="p-2 text-neutral-500 hover:text-danger transition-colors">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <!-- 药品项 3 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 border border-neutral-200 flex flex-col sm:flex-row sm:items-center justify-between">
                                <div class="flex items-start gap-4">
                                    <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                        <i class="fa fa-pills text-primary"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-semibold text-neutral-700">辛伐他汀片</h4>
                                        <p class="text-sm text-neutral-500 mt-0.5">20mg，每晚1次，睡前服用</p>
                                        <div class="flex items-center mt-2">
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success">
                                                <i class="fa fa-calendar-check-o mr-1"></i> 正在服用
                                            </span>
                                            <span class="ml-2 text-xs text-neutral-500">剩余：21天</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex gap-2 mt-4 sm:mt-0">
                                    <button class="p-2 text-neutral-500 hover:text-primary transition-colors">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <button class="p-2 text-neutral-500 hover:text-danger transition-colors">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 用药提醒 -->
                        <div class="mt-8 bg-white rounded-xl shadow-sm p-6 border border-neutral-200">
                            <h3 class="text-lg font-semibold text-neutral-700 mb-4">今日用药提醒</h3>
                            
                            <div class="space-y-4">
                                <div class="flex items-center justify-between p-3 bg-neutral-50 rounded-lg">
                                    <div class="flex items-center gap-3">
                                        <div class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
                                            <i class="fa fa-clock-o text-primary"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium text-neutral-700">08:00 早餐后</p>
                                            <p class="text-sm text-neutral-500">阿司匹林肠溶片</p>
                                        </div>
                                    </div>
                                    <div class="flex gap-2">
                                        <button class="px-3 py-1 text-sm bg-success text-white rounded hover:bg-success/90 transition-colors">
                                            已服用
                                        </button>
                                    </div>
                                </div>
                                
                                <div class="flex items-center justify-between p-3 bg-neutral-50 rounded-lg">
                                    <div class="flex items-center gap-3">
                                        <div class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
                                            <i class="fa fa-clock-o text-primary"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium text-neutral-700">12:30 午餐前</p>
                                            <p class="text-sm text-neutral-500">盐酸二甲双胍片</p>
                                        </div>
                                    </div>
                                    <div class="flex gap-2">
                                        <button class="px-3 py-1 text-sm bg-neutral-200 text-neutral-500 rounded hover:bg-neutral-300 transition-colors">
                                            未服用
                                        </button>
                                    </div>
                                </div>
                                
                                <div class="flex items-center justify-between p-3 bg-neutral-50 rounded-lg">
                                    <div class="flex items-center gap-3">
                                        <div class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
                                            <i class="fa fa-clock-o text-primary"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium text-neutral-700">20:00 睡前</p>
                                            <p class="text-sm text-neutral-500">辛伐他汀片</p>
                                        </div>
                                    </div>
                                    <div class="flex gap-2">
                                        <button class="px-3 py-1 text-sm bg-neutral-200 text-neutral-500 rounded hover:bg-neutral-300 transition-colors">
                                            未服用
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 用药知识 -->
        <section class="py-16 bg-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12">
                    <h2 class="text-[clamp(1.5rem,3vw,2.25rem)] font-bold text-neutral-700 mb-4">安全用药知识</h2>
                    <p class="text-neutral-500 max-w-2xl mx-auto">
                        了解更多关于合理用药的知识，保障您和家人的健康
                    </p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
                    <!-- 知识卡片 1 -->
                    <div class="bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-all duration-300 transform hover:-translate-y-1 border border-neutral-200">
                        <img src="https://picsum.photos/600/300?random=1" alt="老年人用药注意事项" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <h3 class="text-lg font-semibold mb-3 text-neutral-700">老年人用药注意事项</h3>
                            <p class="text-neutral-500 text-sm mb-4 line-clamp-3">
                                老年人由于生理功能减退，用药需特别谨慎。本文介绍老年人用药的基本原则、剂量调整和常见风险...
                            </p>
                            <a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center text-sm transition-colors">
                                阅读全文 <i class="fa fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                    
                    <!-- 知识卡片 2 -->
                    <div class="bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-all duration-300 transform hover:-translate-y-1 border border-neutral-200">
                        <img src="https://picsum.photos/600/300?random=2" alt="儿童用药安全指南" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <h3 class="text-lg font-semibold mb-3 text-neutral-700">儿童用药安全指南</h3>
                            <p class="text-neutral-500 text-sm mb-4 line-clamp-3">
                                儿童不是成人的缩小版，用药需严格按照年龄和体重调整剂量。了解儿童用药的常见误区和正确方法...
                            </p>
                            <a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center text-sm transition-colors">
                                阅读全文 <i class="fa fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                    
                    <!-- 知识卡片 3 -->
                    <div class="bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-all duration-300 transform hover:-translate-y-1 border border-neutral-200">
                        <img src="https://picsum.photos/600/300?random=3" alt="家庭药箱管理技巧" class="w-full h-48 object-cover">
                        <div class="p-6">
                            <h3 class="text-lg font-semibold mb-3 text-neutral-700">家庭药箱管理技巧</h3>
                            <p class="text-neutral-500 text-sm mb-4 line-clamp-3">
                                如何科学管理家庭药箱，合理储存药品，定期清理过期药品，以及急救药品的准备和使用方法...
                            </p>
                            <a href="#" class="text-primary hover:text-primary/80 font-medium flex items-center text-sm transition-colors">
                                阅读全文 <i class="fa fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                <div class="text-center mt-10">
                    <button class="px-6 py-3 bg-white text-primary border border-primary rounded-lg hover:bg-primary/5 transition-colors shadow-sm">
                        查看更多知识 <i class="fa fa-angle-right ml-1"></i>
                    </button>
                </div>
            </div>
        </section>

        <!-- 应用下载 -->
        <section class="py-16 bg-primary/5">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="max-w-5xl mx-auto bg-white rounded-2xl shadow-card overflow-hidden">
                    <div class="flex flex-col md:flex-row">
                        <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
                            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-700 mb-4">
                                随时随地查询药品信息
                            </h2>
                            <p class="text-neutral-500 mb-8">
                                下载我们的移动应用，获取更便捷的药品查询和用药管理体验，支持离线查询和用药提醒功能。
                            </p>
                            <div class="flex flex-col sm:flex-row gap-4">
                                <button class="flex items-center justify-center gap-3 px-6 py-3 bg-neutral-700 text-white rounded-lg hover:bg-neutral-800 transition-colors shadow-sm">
                                    <i class="fa fa-apple text-2xl"></i>
                                    <div class="text-left">
                                        <div class="text-xs">下载</div>
                                        <div class="font-medium">App Store</div>
                                    </div>
                                </button>
                                <button class="flex items-center justify-center gap-3 px-6 py-3 bg-neutral-700 text-white rounded-lg hover:bg-neutral-800 transition-colors shadow-sm">
                                    <i class="fa fa-android text-2xl"></i>
                                    <div class="text-left">
                                        <div class="text-xs">下载</div>
                                        <div class="font-medium">Google Play</div>
                                    </div>
                                </button>
                            </div>
                            <div class="mt-8">
                                <p class="text-sm text-neutral-500 mb-3">或者扫描二维码下载</p>
                                <div class="w-32 h-32 bg-neutral-100 rounded-lg flex items-center justify-center">
                                    <i class="fa fa-qrcode text-5xl text-neutral-400"></i>
                                </div>
                            </div>
                        </div>
                        <div class="md:w-1/2 bg-primary/10 p-8 flex items-center justify-center">
                            <img src="https://picsum.photos/400/800?random=4" alt="药物查询App截图" class="max-h-[500px] rounded-xl shadow-lg border-8 border-white">
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-neutral-700 text-white pt-16 pb-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center mb-6">
                        <i class="fa fa-medkit text-white text-2xl mr-2"></i>
                        <span class="text-xl font-semibold">药知通</span>
                    </div>
                    <p class="text-neutral-300 mb-6">
                        专业的药品信息查询平台，致力于为您提供准确、全面的药品信息，保障用药安全。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-neutral-300 hover:text-white transition-colors">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-neutral-300 hover:text-white transition-colors">
                            <i class="fa fa-wechat text-xl"></i>
                        </a>
                        <a href="#" class="text-neutral-300 hover:text-white transition-colors">
                            <i class="fa fa-qq text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">功能导航</h4>
                    <ul class="space-y-3">
                        <li><a href="#search" class="text-neutral-300 hover:text-white transition-colors">药品查询</a></li>
                        <li><a href="#interaction" class="text-neutral-300 hover:text-white transition-colors">药物相互作用</a></li>
                        <li><a href="#my-medicines" class="text-neutral-300 hover:text-white transition-colors">我的药品</a></li>
                        <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">用药知识</a></li>
                        <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">常见问题</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">关于我们</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">平台介绍</a></li>
                        <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">数据来源</a></li>
                        <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">团队成员</a></li>
                        <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">联系我们</a></li>
                        <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">加入我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">联系客服</h4>
                    <ul class="space-y-3">
                        <li class="flex items-center text-neutral-300">
                            <i class="fa fa-phone w-5 text-center mr-3"></i>
                            <span>400-123-4567</span>
                        </li>
                        <li class="flex items-center text-neutral-300">
                            <i class="fa fa-envelope w-5 text-center mr-3"></i>
                            <span>service@yaozhitong.com</span>
                        </li>
                        <li class="flex items-center text-neutral-300">
                            <i class="fa fa-clock-o w-5 text-center mr-3"></i>
                            <span>周一至周日 9:00-18:00</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-neutral-600 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-neutral-400 text-sm mb-4 md:mb-0">
                        © 2023 药知通. 保留所有权利.
                    </p>
                    <div class="flex flex-wrap gap-4">
                        <a href="#" class="text-neutral-400 hover:text-white text-sm transition-colors">隐私政策</a>
                        <a href="#" class="text-neutral-400 hover:text-white text-sm transition-colors">服务条款</a>
                        <a href="#" class="text-neutral-400 hover:text-white text-sm transition-colors">免责声明</a>
                        <a href="#" class="text-neutral-400 hover:text-white text-sm transition-colors">网站地图</a>
                    </div>
                </div>
                <div class="mt-6 text-center text-neutral-500 text-xs">
                    <p>本网站提供的药品信息仅供参考，不能替代专业医师的诊断和建议，请在医生指导下使用药物。</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-6 right-6 w-12 h-12 bg-primary text-white rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300 hover:bg-primary/90">
        <i class="fa fa-arrow-up"></i>
    </button>

    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('shadow-md');
                navbar.classList.remove('shadow-sm');
            } else {
                navbar.classList.remove('shadow-md');
                navbar.classList.add('shadow-sm');
            }
        });
        
        // 返回顶部按钮
        const backToTopButton = document.getElementById('back-to-top');
        
        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTopButton.classList.remove('opacity-0', 'invisible');
                backToTopButton.classList.add('opacity-100', 'visible');
            } else {
                backToTopButton.classList.add('opacity-0', 'invisible');
                backToTopButton.classList.remove('opacity-100', 'visible');
            }
        });
        
        backToTopButton.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    // 关闭移动菜单（如果打开）
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                    
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // 药品查询功能
        const searchDrugBtn = document.getElementById('search-drug-btn');
        const drugResult = document.getElementById('drug-result');
        
        searchDrugBtn.addEventListener('click', () => {
            // 显示结果区域
            drugResult.classList.remove('hidden');
            
            // 滚动到结果区域
            drugResult.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        });
        
        // 药物相互作用检查
        const checkInteractionBtn = document.getElementById('check-interaction-btn');
        const interactionResult = document.getElementById('interaction-result');
        
        checkInteractionBtn.addEventListener('click', () => {
            // 显示结果区域
            interactionResult.classList.remove('hidden');
            
            // 滚动到结果区域
            interactionResult.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        });
        
        // 添加药物功能
        const addDrugBtn = document.getElementById('add-drug-btn');
        const interactionDrugInput = document.getElementById('interaction-drug-input');
        const selectedDrugsContainer = document.getElementById('selected-drugs');
        
        addDrugBtn.addEventListener('click', () => {
            const drugName = interactionDrugInput.value.trim();
            
            if (drugName) {
                // 创建药物标签
                const drugTag = document.createElement('div');
                drugTag.className = 'flex items-center bg-primary/10 text-primary px-3 py-1 rounded-full';
                drugTag.innerHTML = `
                    ${drugName}
                    <button class="ml-2 text-primary/70 hover:text-primary remove-drug">
                        <i class="fa fa-times"></i>
                    </button>
                `;
                
                // 添加到容器
                selectedDrugsContainer.appendChild(drugTag);
                
                // 清空输入框
                interactionDrugInput.value = '';
                
                // 添加删除功能
                const removeBtn = drugTag.querySelector('.remove-drug');
                removeBtn.addEventListener('click', () => {
                    drugTag.remove();
                });
            }
        });
        
        // 按回车键添加药物
        interactionDrugInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                addDrugBtn.click();
            }
        });
    </script>
</body>
</html>
